<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import Editor from '@/components/Editor/index.vue'
import { FormInstance } from '@arco-design/web-vue'
import useOptions from '@/hooks/useOptions'
const props = defineProps<{
  show: boolean
  id?: number | string
  parentId?: any
  code: any
}>()
console.log('🚀 ~ props:', props)

const emit = defineEmits(['update:show', 'reset', 'confirm'])
const formRef = ref() as Ref<FormInstance>
const { options, getOptions } = useOptions({
  api: '/server-system/admin/dict/parent-list',
  fieldName: { label: 'dictValue', value: 'id' },
  isLoad: false,
  dataKey: 'records',
})
const detail = reactive({
  code: props.code || '',
  dictKey: '',
  dictValue: '',
  id: props.id,
  isSealed: 0,
  sort: 0,
  remark: '',
  parentId: props.parentId,
})
const submit = done => {
  formRef.value.validate(err => {
    if (!err) {
      const query = Object.assign({}, detail)
      post({ url: '/server-system/admin/dict/submit', data: query }, ({ code, msg }) => {
        message({
          type: code == 200 ? 'success' : 'error',
          content: msg,
        })
        emit('update:show', false)
        emit('confirm')
        done(code == 200)
      })
    } else done(false)
  })
}
const getInfo = () => {
  get(
    {
      url: '/server-system/admin/dict/detail',
      data: { id: props.id },
    },
    ({ data }) => {
      Object.assign(detail, data)
    }
  )
}
onMounted(() => {
  if (props.id) getInfo()
  if (props.parentId) {
    getOptions(() => {
      detail.code = options.value.filter(f => f.value == props.parentId)[0].code
    })
  }
})
</script>
<template>
  <CModal v-model:visible="props.show" @before-ok="submit" :mask-closable="false" width="800px" :title="props.id ? '编辑' : '新建'" @cancel="emit('update:show', false)">
    <div class="content">
      <a-form :model="detail" ref="formRef" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 16 }">
        <div class="grid-2">
          <a-form-item label="字典名称" :label-col-style="{ flex: '0 0 12.5%' }" :wrapper-col-style="{ flex: '0 0 85%' }" style="grid-column: 1 / -1" field="dictValue" :rules="[{ required: true, message: '请输入字典名称' }]" :validate-trigger="['change', 'blur']">
            <a-input v-model="detail.dictValue" placeholder="请输入字典名称" />
          </a-form-item>
          <a-form-item label="字典编号" field="code" :rules="[{ required: true, message: '请输入字典编号' }]" :validate-trigger="['change', 'blur']" :disabled="props.parentId">
            <a-input v-model="detail.code" placeholder="请输入字典编号" />
          </a-form-item>
          <a-form-item label="上级字典" v-if="props.parentId" :disabled="props.parentId" :rules="[{ required: true, message: '请选择上级字典' }]">
            <a-select :options="options" v-model="props.parentId" placeholder="请选择" />
          </a-form-item>
          <a-form-item label="字典键值" field="dictKey" v-if="props.parentId" :rules="[{ required: true, message: '请输入字典键值' }]" :validate-trigger="['change', 'blur']">
            <a-input v-model="detail.dictKey" placeholder="请输入字典键值" />
          </a-form-item>
          <a-form-item label="字典排序" field="sort" :rules="[{ required: true, message: '请输入字典排序' }]" :validate-trigger="['change', 'blur']">
            <a-input-number :min="0" v-model="detail.sort" placeholder="请输入字典排序" />
          </a-form-item>
          <a-form-item label="封存" :rules="[{ required: true, message: '请选择封存' }]">
            <a-radio-group v-model="detail.isSealed" type="button">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="字典备注">
            <a-input v-model="detail.remark" placeholder="请输入字典备注" />
          </a-form-item>
        </div>
      </a-form>
    </div>
  </CModal>
</template>
<style lang="less" scoped></style>
